<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery封装的Ajax</title>
    <style>
        #content {
            width: 300px;
            height: 100px;
            border: 1px solid black;
            margin-top: 10px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h3>该页面是测试：jQuery封装的Ajax</h3>
<button id="btn1">点我发送请求(jQuery-ajax-get)</button>
<button id="btn2">点我发送请求(jQuery-ajax-post)</button>
<div id="content"></div>
<script type="text/javascript">
    const btn1 = $('#btn1')
    const btn2 = $('#btn2')
    const content = $('#content')

    btn1.click(() => {
        // 使用 jQuery 发送 Ajax-get（完整版）
        $.ajax({ // 传入配置对象（何为配置对象？配置对象的 key 是指定好的，不能随意修改）
            url: 'http://localhost:8080/test_jquery_get', // 请求地址
            method: 'GET', // 请求方式
            data: {school: '软柠柠吖'}, // 携带的数据（GET 为 query 数据）
            dataType: 'json', // 配置响应数据的格式
            timeout: 2000, // 指定超时时间
            success: (result, responseText, xhr) => { // 请求成功的回调
                console.log(result, responseText, xhr)
                content.append(`<div>汽车名：${result.name}，价格：${result.price}</div>`)
            },
            error: (xhr) => { // 请求失败的回调（超时也算失败）
                console.log('请求出错了', xhr)
            }
        })

        // 使用 jQuery 发送 ajax-get（精简版）
        // $.get('http://localhost:8080/test_jquery_get', {school: '软柠柠吖'}, (result) => {
        //     console.log(result)
        //     content.append(`<div>汽车名：${result.name}，价格：${result.price}</div>`)
        // }, 'json')
    })

    btn2.click(() => {
        // 使用 jQuery 发送 Ajax-post（完整版）
        // $.ajax({
        //     url: 'http://localhost:8080/test_jquery_post', // 请求地址
        //     method: 'POST', // 请求方式
        //     data: {school: '软柠柠吖'}, // 携带的数据（POST 为 body 数据）
        //     dataType: 'json',
        //     timeout: 2000,
        //     success: (result, responseText, xhr) => {
        //         console.log(result, responseText, xhr)
        //         content.append(`<div>汽车名：${result.name}，价格：${result.price}</div>`)
        //     },
        //     error: (xhr) => {
        //         console.log('请求出错了', xhr)
        //     }
        // })

        // 使用 jQuery 发送 ajax-post（精简版）
        $.post('http://localhost:8080/test_jquery_post', {school: '软柠柠吖'}, (result) => {
            console.log(result)
            content.append(`<div>汽车名：${result.name}，价格：${result.price}</div>`)
        }, 'json')
    })
</script>
</body>
</html>
